<template>
  <view>
    <u-navbar
      :safe-area-inset-top="true"
      :fixed="true"
      :placeholder="true"
      :auto-back="false"
      :bg-color="bgColor"
    >
      <view v-show="customEls.indexOf('location')>-1" slot="left" @click="choiseAdd">
        <text class="icon-position font_family icon-position_tongyong_1" />
        <view class="city-name">{{ nowAddress.name }}</view>
        <text class="icon-position font_family icon-a-arrowdown_tongyong_1" />
      </view>
      <view
        v-show="customEls.indexOf('search')>-1"
        slot="left"
      >
        <!--     #ifdef MP-WEIXIN-->
        <image
          v-if="showBackIcon"
          class="icon-left"
          src="/static/shopIcon/back@2x.png"
          @click="navigateBackPrePage"
        />
        <!--    #endif-->
        <view
          class="search-box"
          :style="'width:'+searchBoxWidth+'rpx;'"
        >
          <u-search
            v-model="keyword"
            clearabled
            bg-color="#f5f5f5"
            shape="square"
            :show-action="false"
            :disabled="searchDisabled"
            :placeholder="defaultSearchWord"
            @change="keywordAutoTipsFn"
            @search="judgeSkuCodeFn"
            @click="goShopSeach"
          />
        </view>
      </view>
      <view v-show="customEls.indexOf('shopDetail')>-1" slot="center">
        <view class="detailTab">
          <!--#ifdef MP-WEIXIN-->
          <view class="icon-left" @click="navigateBackPrePage">
            <u-icon name="arrow-left" color="#000" size="20" :bold="true" />
          </view>
          <!--#endif-->
          <u-tabs
            :current="current"
            :list="shopTabs"
            line-width="0"
            line-color="#f56c6c"
            :active-style="{
              fontSize: '32rpx',
              color: '#222222',
              fontWeight: '700'
            }"
            :inactive-style="{
              fontSize: '32rpx',
              color: '#222222',
              fontWeight: '400'
            }"
            @click="tabsChange"
          />
        </view>
      </view>
      <view v-show="customEls.indexOf('searchIndex')>-1" slot="left">
        <view class="indexSeach" :style="'width:'+searchBoxWidth+'rpx;'">
          <view class="concat" @click="goCustomer">
            <text class="font_family icon-earphone_tongyong_1" />
          </view>
          <input placeholder="请输入商品名称、条形码或编码" class="indexInput" @focus="goShopSeach">
        </view>
      </view>
      <view v-show="customEls.indexOf('commonTitle')>-1" slot="center">
        <view class="detailTab">
          <view class="icon-left" @click="navigateBackPrePage">
            <u-icon name="arrow-left" color="#000" size="20" :bold="true" />
          </view>
          <view>{{ navTitle }}</view>
        </view>
      </view>
      <view v-show="customEls.indexOf('searchResult')>-1" slot="left">
        <!--     #ifdef MP-WEIXIN-->
        <image
          v-if="showBackIcon"
          class="icon-left"
          src="/static/shopIcon/back@2x.png"
          @click="navigateBackPrePage"
        />
        <!--    #endif-->
        <view class="indexSeach" :style="'width:'+searchBoxWidth+'rpx;'">
          <view style="position:relative;margin-left:40rpx">
            <view class="search_inner_item">
              <view>{{navTitle}}</view>
              <view class="search_inner_cancel">&#xe61a;</view>
            </view>
            <view class="indexInput2" @click="goShopResultSeach(navTitle)" />
          </view>
        </view>
      </view>
    </u-navbar>
  </view>
</template>

<script>
import {
  searchResourceConf
} from '@/search/commonDataRequest';
import {
  keywordAutoTips,
  judgeSkuCode
} from '@/api/yc_goods'
import { navigateBackPrePage } from '@/common/common'
import { setPlatformFn } from '@/common/ycCommon'
export default {
  name: 'Tabbar',
  props: {
    customEls: {
      type: Array,
      default: null
    },
    bgColor: {
      type: String,
      default: '#ffffff'
    },
    showBackIcon: {
      type: Boolean,
      default: true
    },
    searchDisabled: {
      type: Boolean,
      default: true
    },
    nowAddress: {
      type: [Object, String],
      default: () => {
        return { name: '北京' } //todo
      }
    },
    current: {
      type: Number,
      default: 0
    },
    backExecutor: { // 返回执行函数方法，默认没有
      type: Function,
      default: null
    },
    navTitle: {
      type: String,
      default: ''
    },
    keyWordsDefault: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      platformType: 2,
      keyword: '',
      searchBoxWidth: 506,
      shopTabs: [
        { name: '商品' },
        { name: '详情' },
        { name: '推荐' }
      ],
      defaultSearchWord: '请输入商品名称、品牌、型号、商品编码搜索'
    }
  },
  watch: {
    keyWordsDefault: {
      handler(newVal) {
        this.keyword = newVal || ''
      }
    }
  },
  mounted() {
    this.searchResourceConfFn()
    // #ifdef MP-ALIPAY
    this.searchBoxWidth = 400
    // #endif
  },
  methods: {
    goCustomer() {
      if (!this.vuex_loginStatus) {
        const callbackUrl = '/shopIndex/shopIndex'
        uni.navigateTo({
          url: `/login/login/codeLogin?callbackUrl=${callbackUrl}`
        })
      } else {
        uni.navigateTo({ url: '/customer/index' })
      }
    },
    navigateBackPrePage() {
      this.backExecutor ? this.backExecutor() : navigateBackPrePage()
    },
    setPlateformTypeFn() {
      if (Object.keys(this.vuex_memberInfo).length == 0) {
        return
      }
      switch (this.vuex_memberInfo.accountType) { // 账户类型：10:签约用户；20:普通用户;30认证用户;39普通会员-分销;40分销用户；
        case 10:
          this.platformType = 1
          break
        case 20:
          this.platformType = 2
          break
        case 30:
          this.platformType = 2
          break
        case 39:
          this.platformType = 3
          break
        case 40:
          this.platformType = 3
          break
        default:
          this.platformType = 2
          break
      }
    },
    choiseAdd() {
      uni.navigateTo({ url: '/shopIndex/region' })
    },
    goShopSeach() { //首页获取焦点后跳转
      uni.navigateTo({ url: '/search/index' })
    },
    //首页跳转列表搜索返回
    goShopResultSeach(keyWords) {
      /*uni.navigateTo({ url: '/search/index?keyWords='+ keyWords })*/
      uni.navigateTo({ url: `/search/index?keyWords=${keyWords}` })
    },
    /*智能联想*/
    async keywordAutoTipsFn() {
      const params = {
        cityCode: this.vuex_cityInfo.cityCode,
        platformType: this.platformType,
        queryString: this.keyword
      }
      const result = await keywordAutoTips(params)
      if (result.code != 0) {
        this.$u.toast(result.msg);
        return
      }
      this.stringAutoList = result.data
      this.$emit('stringAutoListShowFn', this.stringAutoList, this.keyword != '')
    },
    /*默认搜索词*/
    async searchResourceConfFn() {
      const platform = setPlatformFn(this.vuex_memberInfo) || 20
      /*if (this.vuex_memberInfo && this.vuex_memberInfo.length > 0) {
        switch (Number(this.vuex_memberInfo.accountType)) {
          case 10:
            platform = 10
            break
          case 20:
            platform = 20
            break
          case 30:
            platform = 20
            break
          case 39:
            platform = 30
            break
          case 40:
            platform = 30
            break
          default:
            platform = 20
            break
        }
      }*/
      const params = {
        'platform': platform,
        categoryIds: '8', //传8 是默认搜索词 传9 是热搜词 也可以一起传 "8,9" 这样
        status: 101,
        warehouse_code: this.vuex_cityInfo.warehouseCode,
      }
      const requestData = await searchResourceConf(params)
      if (requestData && requestData.length > 0 && requestData[0].category_id == 8) {
        this.defaultSearchWord = requestData[0].keyword
      }
    },
    /*手动搜索词搜索*/
    async judgeSkuCodeFn() {
      if (!this.keyword && !this.defaultSearchWord) {
        this.$u.toast('请输入搜索词后搜索')
        return
      }
      const keyword = this.keyword || this.defaultSearchWord
      this.$emit('setHistoryKeywordFn', keyword)
      const params = {
        cityCode: this.vuex_cityInfo.cityCode,
        platformType: this.platformType,
        queryString: keyword,
        warehouseId:this.vuex_cityInfo.warehouseCode,
      }
      const res = await judgeSkuCode(params)
      if (res.code != 0) {
        this.$u.toast(res.msg);
        return
      }
      if (res.data && res.data.spuCode) { //搜索返回结果，跳转详情
        const {
          spuCode,
          skuCode,
          opsRequestMisc,
          requestId,
          itemId,
          productType
        } = res.data
        uni.navigateTo({
          url: `/shopDetail/index?spuCode=${spuCode}&skuCode=${skuCode}&productType=${productType}&opsRequestMisc=${opsRequestMisc}&requestId=${requestId}&itemId=${itemId}`
        });
      } else { //未返回结果，跳转
        uni.navigateTo({
          url: `/productList/productList/index?title=${keyword}&queryString=${keyword}`
        });
      }
    },
    tabsChange(e) {
      this.$emit('tabClick', e)
    },
  }
}
</script>

<style scoped lang="scss">
.detailTab {
  display: flex;
  align-content: center;
  align-items: center;
  //#ifdef MP-ALIPAY
  margin-right: 120rpx;
  margin-top: 10rpx;
  //#endif
  .icon-left {
    position: absolute;
    left: 13rpx;
    margin: 0;
    top: 23rpx;
    padding: 0;
  }
}
.indexSeach {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  .concat {
    width: 72rpx;
    height: 72rpx;
    border-radius: $uni-border-radius-default;
    background: $uni-bg-color;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    overflow: hidden;
    // #ifdef MP-ALIPAY
    margin-right: 20rpx;
    // #endif
    .font_family{
      font-size: 48rpx;
    }
  }
}
/deep/ .indexInput {
  width: 418rpx;
  height: 70rpx;
  border: 2rpx solid #FF5533;
  border-radius: $uni-border-radius-default;
  background: $uni-bg-color;
  font-size: $uni-font-size-base;
  padding: 16rpx;
  box-sizing: border-box;
  transform: rotateZ(360deg);
}
/deep/ .indexInput2 {
  width: 418rpx;
  height: 70rpx;
  border: 2rpx solid #F1F1F1;
  border-radius: $uni-border-radius-default;
  background: #F1F1F1;
  font-size: $uni-font-size-base;
  padding: 16rpx;
  box-sizing: border-box;
  transform: rotateZ(360deg);
}
/deep/ .search_inner_item{
  box-sizing: border-box;
  background: #8C8C8C;
  font-size: $uni-font-size-base;
  padding: 8rpx;
  color: $uni-text-color-inverse;
  display: flex;
  height: 55rpx;
  position: absolute;
  border: 2rpx solid #8C8C8C;
  border-radius: $uni-border-radius-default;
  z-index: 999;
  top: 8rpx;
  left: 14rpx;
}
/deep/ .search_inner_cancel{
  font-family: "xfs_iconfont" !important;
  margin-left:8rpx;
  color: $uni-text-color-inverse;
  font-size: $uni-font-size-lg;
  float: left;
}

/deep/ .u-navbar__content {
align-content: center !important;
}
.u-nav-slot {
width: 140rpx;
display: flex;
color: $uni-text-color;
justify-content: space-between;
align-items: flex-end;
align-content: flex-end;
font-size: $uni-font-size-base;
}
.u-page__item__slot-icon{
width: 52rpx;
height: 52rpx;
}
.icon-position{
  float: left;
  font-size: 34rpx;
  position: relative;
  top:3rpx;
}
.city-name{
height: 32rpx;
float: left;
margin: auto 8rpx;
font-size: $uni-font-size-base;
font-weight: bold;
// #ifdef MP-ALIPAY
position: relative;
top: 4rpx;
// #endif
}
.search-box{
height: 72rpx;
margin-bottom: 6rpx;
// #ifdef MP-ALIPAY
margin-left: 40rpx;
// #endif
padding-top: 6rpx;
}
.icon-left{
width: 24rpx;
height: 48rpx;
float: left;
// #ifdef MP-WEIXIN
margin: 14rpx 24rpx 0 0;
// #endif
// #ifdef MP-ALIPAY
margin: 16rpx 18rpx 0 0;
// #endif
}
</style>
